<form id="main-status-form" action="/articles" accept-charset="UTF-8" data-remote="true" method="post">
<input name="utf8" type="hidden" value="✓" autocomplete="off">
<input type="hidden" name="authenticity_token" value="NOTHING" autocomplete="off">
<div class="<%= "crayons-card p-2" unless expanded %>">
  <textarea class="crayons-textfield element-focused"
    placeholder="<%= expanded ? t("views.stories.status_expanded_placeholder") : t("views.stories.status_placeholder") %>" aria-label="<%= t("views.stories.status_placeholder") %>" maxlength="256" rows="<%= expanded ? "4" : "1" %>" name="article[title]" id="article_title" style="height: <%= expanded ? "120px" : "40px" %>;"></textarea>
  <input value="status" autocomplete="off" type="hidden" name="article[type_of]" id="article_type_of">
  <input value="1" autocomplete="off" type="hidden" name="article[published]" id="article_published">
  <% if @article && @article.published == true && @user && !Rails.env.test? %>
    <%= render "articles/liquid", article: @article, title: @article.title %>
    <input value="<%= article_url(@article) %>" autocomplete="off" type="hidden" name="article[body_url]" id="article_body_url">
  <% else %>
    <input value="" autocomplete="off" type="hidden" name="article[body_markdown]" id="article_body_markdown">
  <% end %>
  <div id="main-status-form-controls" class="justify-between items-center pt-2 <%= expanded ? "flex " : "hidden" %>">
    <% if !expanded %>
      <div class="fs-xs color-base-60">
        <%= t("views.stories.status_hint_html") %>
      </div>
    <% elsif @article && Subforem.cached_postable_array.any? %>
      <input value="<%= @article.cached_tag_list %>" autocomplete="off" type="hidden" name="article[tag_list]" id="article_tag_list">
      <div>
        <select name="article[subforem_id]" id="article_subforem_id" class="crayons-select">
          <% Subforem.cached_postable_array.each do |array| %>
            <option value="<%= array.first %>" <%= "selected".html_safe if RequestStore.store[:subforem_id] == array.first %>><%= array.second %></option>
          <% end %>
        </select>
      </div>
    <% end %>
    <div class="flex items-center">
      <div class="fs-s color-base-60 pr-2 align-right pr-1" style="min-width:65px">
        <span id="main-status-form-char-count">0</span>/256
      </div>
      <input type="submit" name="commit" value="<%= t("views.stories.submit") %>" class="crayons-btn crayons-btn--primary py-1" data-disable-with="<%= t("views.stories.submit") %>">
    </div>
  </div>
</div>
</form>

<script defer>

  var statusForm = document.getElementById('main-status-form');
  var loopingForCSRF = setInterval(() => {
    if (window.csrfToken !== undefined) {
      statusForm.querySelector('input[name="authenticity_token"]').value = window.csrfToken;
      clearInterval(loopingForCSRF);
    }
  }, 25);

  var enterKey = 13;
  
  // Function to handle textarea auto-resize and character count
  function updateTextareaHeight(textarea) {
    textarea.style.height = 'auto'; // Reset the height
    var newHeight = Math.max(textarea.scrollHeight + 3, parseInt(textarea.style.minHeight || '40px'));
    textarea.style.height = `${newHeight}px`; // Set the new height
    document.getElementById('main-status-form-char-count').innerText = textarea.value.length;
  }
  
  document.getElementById('article_title').onkeydown = function (e) {
    // Handle Cmd+Enter (Mac) or Ctrl+Enter (other systems) to submit
    if (window.Forem.Runtime.hasOSSpecificModifier(e) && e.keyCode === enterKey) {
      document.getElementById('main-status-form').submit();
      return;
    }
    
    // Allow regular Enter for line breaks - no preventDefault needed
    // Handle textarea auto-resize after input
    setTimeout(() => {
      updateTextareaHeight(e.target);
    }, 1);
  }

  document.getElementById('article_title').oninput = function (e) {
    updateTextareaHeight(e.target);
  }

  document.getElementById('article_title').onkeyup = function (e) {
    updateTextareaHeight(e.target);
  }

  // Handle focus behavior for non-expanded forms (main feed)
  <% unless expanded %>
  var textarea = document.getElementById('article_title');
  var isExpanded = false;
  
  textarea.addEventListener('focus', function() {
    if (!isExpanded) {
      isExpanded = true;
      // Set minimum height to 4 lines when focused
      this.style.minHeight = '120px';
      this.style.height = '120px';
    }
  });
  
  textarea.addEventListener('blur', function() {
    // Only collapse if there's no content
    if (this.value.trim() === '') {
      isExpanded = false;
      this.style.minHeight = '40px';
      this.style.height = '40px';
    }
  });
  <% end %>


</script>